import { GlobalOutlined } from '@ant-design/icons';
import { Menu, Dropdown, Typography } from 'antd';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { useSelector } from '../../redux/hook';
import { languageSlice } from '../../redux/language/language.slice';
import styles from './header.module.css'

export const Header = () => {
    const { t } = useTranslation();
    const dispatch = useDispatch();
    const {changeLanguage, addLanguage} = languageSlice.actions;
    const menuClickHandler = (e) => {
        if(e.key === 'new') {
            dispatch(addLanguage({name: '新语言', code: 'new_language'}))
        }
        dispatch(changeLanguage(e.key));
    }
    const language = useSelector(state => state.language.language);
    const languageList = useSelector(state => state.language.languageList);
    console.log(languageList);
    return (
        <div className={styles['app-header']}>
        <div className={styles['top-header']}>
            <div className={styles.inner}>
                <Typography.Text>{t("header.slogan")}</Typography.Text>
                <Dropdown.Button
                    style={{ marginLeft: 15 }}
                    overlay={
                        <Menu onClick={menuClickHandler}>
                            {languageList.map(item => {
                                return <Menu.Item key={item.code}>{item.name}</Menu.Item>
                            })}
                            <Menu.Item key={"new"}>
                            {t("header.add_new_language")}
                            </Menu.Item>
                        </Menu>
                    }
                    icon={<GlobalOutlined/>}>
                        {language === 'zh'? '中文': 'English'}
                </Dropdown.Button>
            </div>
        </div>
    </div>
    );
}
